<template>
  <div class="basic">
    <div style="display: flex">
      <div class="header-dd" style="">
        <div class="top-total" style="">
          <div class="top-total-title">订单数</div>
          <div class="top-total-content">
            <div style="display: flex">
              <div class="content-left"></div>
              <div>已支付：</div>
              <div class="content-pay">
                {{ this.statistChartList.complateMap.complateIsPaytotal }}
              </div>
            </div>
            <div style="display: flex">
              <div class="content-left"></div>
              <div>总订单：</div>
              <div class="content-pay">
                {{ this.statistChartList.map.sumNum }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-dd">
        <div class="top-total">
          <div class="top-total-title">营业额</div>
          <div class="top-total-content">
            <div style="display: flex">
              <div class="content-left"></div>
              <div>已支付：</div>
              <div class="content-pay" style="margin-right: 15px">
                {{ this.statistChartList.complateMap.complateIsPayMoney }}
              </div>
            </div>
            <div style="display: flex">
              <div class="content-left"></div>
              <div>总额：</div>
              <div class="content-pay">
                {{ this.statistChartList.map.sumMoney }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="startTrade">
        是否营业：<a-switch
          :key="appStatus"
          :checked="appStatus"
          @change="startTrade"
        />

        <!-- <a-button class="trade" type="primary" @click="startTrade"
          >开始营业</a-button
        >
        <a-button
          class="trade"
          type="primary"
          @click="stopTrade"
          style="margin-left: 20px"
          >停止营业</a-button
        > -->
      </div>
    </div>
    <div class="basic-content">
      <!-- search start -->
      <div class="basic-search">
        <a-form layout="inline">
          <a-form-item label="员工姓名:">
            <a-input
              placeholder="请输入"
              v-model="searchData.realName"
              style="width: 180px"
            />
          </a-form-item>
          <a-form-item label="员工ID:">
            <a-input
              placeholder="请输入"
              v-model="searchData.userName"
              style="width: 180px"
            />
          </a-form-item>
          <a-form-item label="订单号:">
            <a-input
              placeholder="请输入"
              v-model="searchData.orderNo"
              style="width: 180px"
            />
          </a-form-item>
          <a-form-item label="商品名称:">
            <a-input
              placeholder="请输入"
              v-model="searchData.goodName"
              style="width: 180px"
            />
          </a-form-item>

          <a-form-item label="订单状态">
            <a-select
              placeholder="请选择"
              v-model="searchData.status"
              style="width: 100px"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">未完成</a-select-option>
              <a-select-option value="1">完成</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="日期字段">
            <a-range-picker @change="onChange" />
            <!-- <a-button type="primary" icon="search" style="margin-left: 18px"
            >搜索</a-button
          > -->
          </a-form-item>

          <a-form-item label="">
            <a-button
              type="primary"
              icon="search"
              style="margin-left: 18px"
              @click="getRefush"
              >查询</a-button
            >
            <a-button
              type="primary"
              style="margin-left: 18px"
              @click="fullScreen"
              >全屏/缩小</a-button
            >
            <a-button
              type="primary"
              style="margin-left: 18px"
              @click="exportList"
              >导出</a-button
            >
            <audio ref="successAudio">
              <source src="../../assets/新的订单查收.mp3" type="audio/mpeg" />
            </audio>
            <!-- <a-button type="primary" style="margin-left: 18px" @click="radio"
              >音频</a-button
            > -->
          </a-form-item>
        </a-form>
      </div>

      <!-- search end -->

      <!-- operate start -->
      <div class="table-operator" style="padding: 20px">
        <p style="float: left; font-size: 18px; font-weight: 700; color: #000">
          订单列表
        </p>
        <p style="float: right">
          <a-button
            type="primary"
            style="margin-left: 8px"
            :disabled="!this.appStatus"
            @click="handleAdd"
            >下单</a-button
          >
        </p>
      </div>
      <!-- operate end -->

      <!-- table start -->
      <TableList
        :columns="columns"
        :dataSource="data"
        :pagination="true"
        :tableLoading="loading"
        :total="total"
        size="middle"
        pk="key"
        @queryData="queryData"
        @editClick="editClick"
      />
      <!-- table end -->

      <!-- 彈窗 -->
      <a-modal
        :getContainer="() => this.$refs.layoutContent"
        :maskClosable="false"
        class="add-order-Modal"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @cancel="visible = false"
        :footer="null"
        :closable="false"
      >
        <!-- <template slot="title">
          <div style="">
            <a-icon type="form" style="font-size: 24px" />
            <div style="margin-left: 8px; font-weight: 700">新增订单</div>
          </div>
        </template> -->
        <addOrderModel
          ref="addOrderModel"
          @closeOrderModel="closeOrderModel"
          v-if="visible"
          @clearOrder="clearOrder"
        />
        <template slot="footer">
          <a-button
            key="back"
            size="large"
            type="primary"
            @click="handleCancel()"
          >
            取消
          </a-button>
        </template>
      </a-modal>
      <!-- form end -->
      <!-- 查看详情的弹窗 -->
      <div ref="layoutContent">
        <a-modal
          id="detilModel"
          :getContainer="() => this.$refs.layoutContent"
          :maskClosable="false"
          class="deatilModal"
          :visible="deatilState"
          :confirm-loading="confirmLoading"
          :footer="null"
          @cancel="deatilState = false"
        >
          <template slot="title">
            <div style="">
              <!-- <a-icon type="form" style="font-size: 24px" /> -->
              <div style="margin: 8px; font-weight: 700; font-size: 24px">
                订单信息
              </div>
            </div>
          </template>
          <div class="ztClass">
            <div class="title"><span class="title1"></span>用户信息</div>
            <div class="user-info">
              <div>
                <span class="infoName">员工姓名: </span>
                <span class="info-de">{{
                  this.deatilData.realName || "-"
                }}</span>
              </div>
              <div>
                <span class="infoName">员工电话: </span>
                <span class="info-de">{{
                  this.deatilData.phoneNumber || "-"
                }}</span>
              </div>
              <div>
                <span class="infoName">员工ID: </span>
                <span class="info-de">{{
                  this.deatilData.userName || "-"
                }}</span>
              </div>
            </div>
            <div class="title"><span class="title1"></span>订单信息</div>
            <div>
              <div class="user-info1">
                <div class="infoName" style="margin-bottom: 20px">
                  订单金额:
                  <span class="price">¥{{ this.deatilData.orderPrice }}</span>
                </div>
                <div>
                  <span class="infoName">订单号: </span>
                  <span class="info-de">{{
                    this.deatilData.orderNo || "-"
                  }}</span>
                </div>
                <div>
                  <span class="infoName">下单时间: </span>
                  <span class="info-de">{{
                    this.deatilData.startTime || "-"
                  }}</span>
                </div>
              </div>
              <div class="user-info2">
                <span class="infoName">订单备注: </span>
                <span class="info-de">{{ this.deatilData.remink || "-" }}</span>
              </div>
            </div>
            <div class="title"><span class="title1"></span>订单明细</div>
            <div class="orderList">
              <div class="detailItem">
                <span class="infoName">商品名称</span>
                <span class="infoName">规格</span>
                <span class="infoName">甜度</span>
                <span class="infoName">单价</span>
                <span class="infoName">数量</span>
              </div>
              <div
                class="detailList"
                v-for="item of deatilData.coffeeGoods"
                :key="item.id"
              >
                <!-- <img class="detailImg" :src="item.imgUrl" alt="" /> -->
                <!-- <div class="detailText"> -->
                <span class="info-de"> {{ item.goodName }}</span>
                <span class="info-de"> {{ item.coffeeType }}</span>
                <!-- </div> -->
                <span class="info-de">{{ item.sugarType }}</span>
                <span class="price">¥{{ item.sumTotal }}</span>
                <span class="info-de">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import TableList from "./Table.vue";
import addOrderModel from "./addOrder.vue";
import store from "@/store";
import {
  deletebyId,
  listOrders,
  getOrderInfo,
  findUpGoodsType,
  expertOrdersExcel,
  statistChart,
  complateOrder,
  payMoney,
  addOrder,
  doBussiness,
  shutDown,
  findAppStatus,
} from "@/api";
export default {
  components: {
    TableList,
    addOrderModel,
  },
  data() {
    return {
      appStatus: null,
      loaded: false,
      statistChartList: {
        unMap: {},
        map: {},
        complateMap: {},
      },
      debounceTimeout: null,
      total: 10,
      // 查看详情
      value: "",
      loading: { spinning: false, tip: "正在打印标签..." },
      visible: false,
      deatilData: {
        coffeeGoods: [],
      }, //查看详情数据
      deatilState: false, //查看详情弹窗
      confirmLoading: false,
      columns: [
        // { title: "订单号", key: "no", scopedSlots: { customRender: "no" } },
        { title: "订单号", dataIndex: "orderNo", key: "orderNo" },
        { title: "员工ID", dataIndex: "userName", key: "userName" },
        { title: "员工姓名", dataIndex: "realName", key: "realName" },
        { title: "员工电话", dataIndex: "phoneNumber", key: "phoneNumber" },
        { title: "商品价格", dataIndex: "orderPrice", key: "orderPrice" },
        {
          title: "完成状态",
          key: "status",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "付款状态",
          key: "isPay",
          scopedSlots: { customRender: "isPay" },
        },
        { title: "下单时间", dataIndex: "startTime", key: "startTime" },
        { title: "取货码", dataIndex: "pickingCode", key: "pickingCode" },
        {
          title: "操作项",
          key: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "150px",
        },
      ],
      data: [],
      searchData: {
        goodName: "", //商品名称
        orderNo: "", //订单号
        pageNo: 1, //pageNo,示例值(1)
        pageSize: 10, //pageSize,示例值(10)
        realName: "", //员工姓名
        status: "", //订单状态0未完成1完成
        userName: "", //员工工号
        startTime: "",
        endTime: "",
      },
    };
  },
  mounted() {
    this.getDatas();
    this.findAppStatus();
    this.statist();
    this.$socket.get((res) => {
      console.log("socket", res);
      if (res.code) {
        this.$refs.successAudio.play();
        this.$notification.open({
          type: "success",
          message: "接收到新订单!",
          description: res.msgTxt,
          getContainer: () => this.$refs.layoutContent,
          onClick: () => {
            // console.log("Notification Clicked!");
          },
        });
      }
      console.log(res, "接收到socket,刷新订单列表");
      this.getDatas();
    });
  },
  computed: {},
  methods: {
    radio() {
      this.$refs.successAudio.play();
    },
    async startTrade(e) {
      console.log(e);
      if (e == true) {
        console.log(123);
        try {
          const res = await doBussiness();
          if (res.code == 200) {
            this.$message.success("开始营业！");
            this.findAppStatus();
          }
        } catch (error) {
          console.log(error);
        }
      } else {
        try {
          const res = await shutDown();
          if (res.code == 200) {
            this.$message.success("停止营业！");
            this.findAppStatus();
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    async stopTrade() {},
    async findAppStatus() {
      try {
        const res = await findAppStatus();
        console.log(Boolean(res.appStatus), "res");
        this.appStatus = res.appStatus === "true" ? true : false;
      } catch (error) {
        console.log(error);
      }
    },

    getRefush() {
      this.getDatas();
      this.statist();
    },
    statist() {
      statistChart(this.searchData).then((res) => {
        Object.assign(this.statistChartList, {
          unMap: res.unMap,
          map: res.map,
          complateMap: res.complateMap,
        });
      });
    },
    exportList() {
      expertOrdersExcel(this.searchData).then((res) => {
        let blob = new Blob([res], { type: res.type });
        let filename = "导出文件名.xls";
        let objectUrl = window.webkitURL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = objectUrl;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        a.remove();
      });
    },
    clearOrder() {
      this.visible = false;
    },
    editClick(item) {
      // 1完成 2详情
      if (item.index === "1") {
        if (item.row.status === "已完成") return;
        this.loading = { spinning: true, tip: "正在打印标签..." };
        //
        clearTimeout(this.debounceTimeout);
        this.debounceTimeout = setTimeout(async () => {
          const res = await complateOrder({ orderId: item.row.id });
          if (res.code === 200) {
            this.loading = { spinning: false, tip: "正在打印标签..." };
            this.$message.success("订单已完成");
            this.getDatas();
          } else {
            this.$message.error(res.msg);
          }
        }, 500);
      } else if (item.index === "2") {
        this.deatilState = true;
        let data = { orderId: item.row.id };
        getOrderInfo(data).then((res) => {
          if (res.code === 200) {
            this.deatilData = res.data;
            this.getDatas();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (item.index === "3") {
        if (item.row.isPay === "已付款") return;
        clearTimeout(this.debounceTimeout);
        this.debounceTimeout = setTimeout(async () => {
          const res = await payMoney({ orderId: item.row.id });
          if (res.code === 200) {
            this.$message.success("已付款");
            this.getDatas();
            this.statist();
          } else {
            this.$message.error(res.msg);
          }
        }, 500);
      } else if (item.index === "4") {
        let id = item.row.id;
        console.log(id, "id");
        this.$confirm({
          title: "提示",
          content: (h) => (
            <div style="color:red;">此操作将永久删除此数据，是否继续？</div>
          ),
          onOk: async () => {
            try {
              const res = await deletebyId({ id: id });
              if (res.code == 200) {
                this.$message.success("删除成功!");
                this.getDatas();
              }
            } catch (e) {
              console.log(e);
            }
          },
          onCancel: () => {},
          class: "test",
        });
      }
    },

    async getDatas() {
      listOrders(this.searchData).then((res) => {
        this.total = res.total;
        if (res.code === 200) {
          this.data = res.rows.map((item) => {
            return {
              id: item.id,
              orderNo: item.orderNo,
              userName: item.userName, //员工id
              realName: item.realName, //员工姓名
              phoneNumber: item.phoneNumber || "-",
              orderPrice: item.orderPrice,
              status: item.status === "0" ? "未完成" : "已完成", // 0未完成
              startTime: item.startTime,
              isPay: item.isPay === "0" ? "未付款" : "已付款", // 0未完成
              completionStatus: item.status,
              completionIsPay: item.isPay,
              pickingCode: item.pickingCode,
            };
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    deatilModalOk() {
      this.deatilState = false;
    },
    // 弹窗：添加
    handleAdd() {
      this.visible = true;
    },
    // 弹窗：取消
    handleCancel() {
      this.visible = false;
    },
    // 日期改变事件
    onChange(date, dateString) {
      console.log(date, "data");
      console.log(dateString, "dateString");
      this.searchData.startTime = dateString[0];
      this.searchData.endTime = dateString[1];
    },
    queryData(data) {
      this.searchData.pageNo = data.pageNo;
      this.searchData.pageSize = data.pageSize;
      this.getDatas();
    },
    closeOrderModel() {
      this.visible = false;
      this.$refs.successAudio.play();
      this.getDatas();
      this.statist();
    },
    // 全屏缩小放大
    fullScreen() {
      if (!document.fullscreenElement) {
        // 进入全屏
        document.documentElement.requestFullscreen();
        this.$store.commit("screenType", true);
        console.log(this.$store.getters.screenType, "123123");
      } else {
        // 退出全屏
        if (document.exitFullscreen) {
          this.$store.commit("screenType", false);
          console.log(this.$store.getters.screenType, "4545");
          document.exitFullscreen();
        }
      }

      return;
      const el = document.querySelector("#layout-content"); // 需要全屏的模块唯一ID
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        el.requestFullscreen();
      }
    },
  },
  beforeDestroy() {
    this.$el.remove;
  },
};
</script>

<style lang="less" scoped>
.header-dd {
  background-color: #ffff;
  border-radius: 8px;
  min-width: 30%;
  max-width: 60%;
  margin-right: 20px;
  margin-bottom: 20px;
}
.startTrade {
  min-width: 15%;
  max-width: 30%;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #f5faff;
  border-radius: 8px;
  border-bottom: 1px solid rgb(230, 230, 230);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  .trade {
    width: 120px;
    height: 54px;
    border-radius: 8px;
  }
}
.top-total {
  .top-total-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    background-color: #f5faff;
    padding: 15px 20px;
    border-bottom: 1px solid rgb(230, 230, 230);
    border-radius: 8px;
  }
  .top-total-content {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 16px;
    .content-left {
      width: 6px;
      height: 18px;
      background-color: #2374da;
      border-radius: 6px;
      margin-right: 5px;
    }
    .content-pay {
      font-size: 28px;
      font-weight: 700;
      color: #2374da;
    }
  }
}

.ztClass {
  font-size: 18px;
}
.title {
  height: 50px;
  line-height: 50px;
  border-radius: 8px;
  background-color: #f0f7fd;
  color: #004b8d;
  font-family: Noto Sans SC;
  // font-size: 26px;
  font-weight: 500;
  .title1 {
    display: inline-block;
    margin: 0px 20px 0px;
    width: 7px;
    height: 21px;
    border-radius: 2px;
    background-color: #004b8d;
  }
}
// .deatilModal
/deep/.ant-modal {
  width: 80% !important;
  height: 80% !important;
}
/deep/.ant-modal-content {
  // height: 100% !important;
  // background-color: #e4ebf1;
}
/deep/.ant-modal-header {
  text-align: center;
  padding: 20px 24px;
}
.basic {
  padding: 20px 20px 0 20px;
  .basic-content {
    // margin: 20px;
    // padding-top: 20px;
    background-color: #ffff;
    border-radius: 8px;
  }
  .basic-search {
    background-color: #f5faff;
    padding: 15px;
    border-bottom: 1px solid rgb(230, 230, 230);
    color: rgba(0, 0, 0, 0.65);
    border-radius: 8px;
  }
}
.user-info2 {
  margin: 0 20px 30px 30px;
}
.infoName {
  font-family: Noto Sans SC;
  // font-size: 24px;
  font-weight: 400;
  color: #999;
}
.info-de {
  font-family: Noto Sans SC;
  // font-size: 24px;
  font-weight: 400;
  color: #333;
}
.user-info1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 30px 0px;
  // display: flex;
  // justify-content: space-between;
}
.price {
  font-family: Noto Sans SC;
  // font-size: 24px;
  font-weight: 500;
  color: #ff3d00;
}
.user-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 30px 30px;
  // display: flex;
  // justify-content: space-between;
}
.orderList {
  min-height: 80px;
  max-height: 260px;
  overflow: auto;
}
.detailItem {
  height: 40px;
  margin-bottom: 5px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 20px 30px 0px;
}
.detailList {
  height: 40px;
  margin-bottom: 5px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 30px 20px;
}
.detailImg {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.detailText {
  display: flex;
  flex-direction: column;
  flex: auto;
  margin-left: 20px;
}
.detailPrice {
  width: 60px;
}

.add-order-Modal /deep/.ant-modal-content {
  background-color: #e4ebf1;
  // height: 100% !important;

  .ant-modal-body {
    // height: 100%;
  }
}

// .add-order-Modal /deep/.ant-modal {
//   width: 1050px !important;
// }
</style>
